<template>
	<view class="work-container">
		<view class="work-container-bg"></view>
		<view class="work-main">
			<cc-belong></cc-belong>
			<view class="slogan">
				<view class="slogan-hd title-black">Hi,欢迎使用</view>
				<view class="slogan-bd title-black font-primary">{{ title }}</view>
			</view>
			<view class="action-container">
				<view class="action-main">
					<view class="action" :class="{ 'action-hidden': !item.url }" @tap="handleRouter(item)"
						v-for="(item, index) in menus" :key="index">
						<cc-image width="80rpx" height="80rpx" :src="getImage(item.icon)"></cc-image>
						<view class="action-text">{{ item.label }}</view>
					</view>
				</view>
			</view>

			<view class="notice">
				<view class="notice-main fc">
					<cc-image width="40rpx" height="40rpx" :src="getImage('index-notice')"></cc-image>
					<view class="notice-text">
						<text>系统通知: {{ title }}全面升级, 欢迎体验!</text>
					</view>
				</view>
			</view>

			<view class="function">
				<cc-create-classrule ref="CreateClassruleRef" style="flex: 1">
					<view slot="action" class="function-item function-item-left" @tap="handleCreateClassrule">
						<view class="function-item-main">
							<view class="function-item-label">一键排课</view>
							<view class="function-item-desc">快捷安排课程</view>
						</view>
					</view>
				</cc-create-classrule>
				<view class="function-right function-item function-item-right" @tap="handleReport">
					<view class="function-item-main">
						<view class="function-item-label">数据中心</view>
						<view class="function-item-desc font-info">查看教学数据</view>
					</view>
				</view>
			</view>
			<view class="course">
				<view class="fcb">
					<view class="course-hd-left fc">
						<view class="title-black">今日课节</view>
					</view>
					<view class="font-24 fc font-primary" @tap="getClassCourse">
						<view class="refresh-icon" :class="{ rotating: loading }">
							<cc-image width="28rpx" height="28rpx" :src="getImage('refresh')"></cc-image>
						</view>
						<text class="ml10">刷新</text>
					</view>
				</view>
				<view class="course-list">
					<view v-if="count">
						<block v-for="(item, index) in list" :key="index">
							<cc-classtime :item="item" @complete="getClassCourse"></cc-classtime>
						</block>
					</view>
					<cc-loadmore :showLimit="2" :loading="loading" :current="list.length" :count="count" />
					<view class="section-empty" v-if="!loading && !count">
						<cc-empty mode="list" text="暂无课节" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		classCourseList
	} from '@/codecat/api/education/class/classTime';
	import {
		APP_TITLE
	} from '@/env';
	export default {
		name: 'Index',
		computed: {
			date_range() {
				const start = this.$dayjs().format('YYYY-MM-DD');
				const end = this.$dayjs().format('YYYY-MM-DD');
				return [start, end];
			}
		},
		data() {
			return {
				title: APP_TITLE,
				loading: false,
				list: [],
				count: 0,
				menus: [{
						label: '学员管理',
						icon: 'student.png',
						url: '/student',
						bgColor: '#2ba471'
					},
					{
						label: '班级管理',
						icon: 'class.png',
						url: '/class',
						bgColor: '#2ba471'
					},
					{
						label: '排课管理',
						icon: 'class-rule.png',
						url: '/class-rule'
					},
					{
						label: '上课管理',
						icon: 'attend-list.png',
						url: '/attend-list'
					}
				]
			};
		},
		onLoad() {
			this.initPage();
		},
		methods: {
			async initPage() {
				await this.$store.dispatch('GetInfo');
				if (this.token && this.belong.length) {
					this.getClassCourse();
				}
			},
			handleReport() {
				this.$Router.pushTab('/report');
			},
			handleCreateClassrule() {
				this.$refs['CreateClassruleRef'].teachingTypeOpen();
			},
			handleRouter(item) {
				if (item.url) {
					this.$Router.push(item.url);
				}
			},
			/**
			 * 今日日程
			 */
			getClassCourse() {
				this.loading = true;
				this.count = 0;

				classCourseList({
						cla_id: null,
						date_range: this.date_range,
						status: null, // 点名和没点名都要
						page: 1,
						limit: 10,
						sort: 'asc',
						teacher_id: this.userInfo.id
					})
					.then((res) => {
						// console.log(res);
						this.loading = false;
						const {
							list,
							count
						} = res.data;
						this.count = count || 0;
						if (Array.isArray(list) && list.length) {
							this.list = list;
						}
					})
					.catch((_) => {
						this.loading = false;
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>